<!-- 拉新界面 -->
<template>
	<view class="container" :style="activityJson?.wrapper?.style">
		<button open-type="share" plain :style="activityJson?.btn1?.style">{{ activityJson?.btn1?.text }}</button>
		<button :style="activityJson?.btn2?.style" @click="toUrl(`/pagesActivity/ACTE017/inviteRecords?inviteParams=${JSON.stringify(vdata.inviteParams)}`)" plain>{{ activityJson?.btn2?.text || '点击查看拉新记录' }}</button>
		<view class="rule" :style="activityJson?.rule?.style">
			<view class="title" :style="activityJson?.rule?.title?.style">{{ activityJson?.rule?.title?.text || '<使用说明>' }}</view>
			<text :style="activityJson?.rule?.content?.style">{{ activityJson?.rule?.content?.text || '1.点击邀请按钮，分享至您的好友。\n2.好友收到消息后填写准确信息，并到网点进行新开户即可达到激活条件。\n3.系统会自动判定激活标准进行线上激活，您也可以通过客户经理进行线下扫码激活。' }}</text>
		</view>
	</view>
</template>

<script setup>
	import { reactive, ref } from 'vue'
	import { onLoad, onShareAppMessage } from '@dcloudio/uni-app'
	import storageManage from '@/util/storageManage.js'
	
	// activityJson
	const activityJson = ref({
		"wrapper":{
			"style":{
				"background":"url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/ce42c2bd-4e63-4665-bd46-23e9d3f4d741.png') no-repeat center 132rpx / 702rpx 269rpx, url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/b903f1d7-3e8e-4a01-88be-e6d0968dcbab.png') no-repeat left top / 100% 876rpx, #F04D44"
			}
		},
		"btn1":{
			"text":"",
			"style":{
				"width":"640rpx",
				"height":"118rpx",
				"background":"url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/e4b6627f-22af-438a-b36f-4e6d48680f47.png') no-repeat left top / 100% 100%"
			}
		},
		"btn2":{
			"text":"",
			"style":{
				"width":"622rpx",
				"height":"100rpx",
				"background":"#fff"
			}
		},
		"rule":{
			"title":{
				"text":"<使用说明>",
				"style":{
					"color":"#FF443F"
				}
			},
			"content":{
				"text":"1.点击邀请按钮，分享至您的好友。\n2.好友收到消息后填写准确信息，并到网点进行新开户即可达到激活条件。\n3.系统会自动判定激活标准进行线上激活，您也可以通过客户经理进行线下扫码激活。"
			},
			"style":{
				"background":"#FFF6E5"
			}
		},
		"share":{
			"img":"https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/94016a44-ad56-487d-b1c6-27065e036426.png",
			"text":"我在郑州邮政开卡了，福利多多，共享众多权益活动吧"
		}
	})
	const invitedJson = ref()	// 受邀页页面动态参数
	
	const vdata = reactive({
		inviteParams: {}
	})
	
	onLoad(({ inviteParams, inviteJson, invitedJson:beinvitedJson }) => {
		activityJson.value = JSON.parse(inviteJson || null)
		invitedJson.value = beinvitedJson
		vdata.inviteParams = JSON.parse(inviteParams)
	})
	/**
	 * 分享功能
	 * 其中url携带的参数是 分享成功后 跳转的页面
	 */
	onShareAppMessage((option)=>{
		return {
			title:activityJson?.value?.share?.text || '我在郑州邮政开卡了，福利多多，共享众多权益活动吧',
			path: `/pages/welcome/index?share=${JSON.stringify({ ...vdata.inviteParams, url: '/pagesActivity/ACTE017/beInvited' })}&invitedJson=${invitedJson.value}`,
			imageUrl:activityJson?.value?.share?.img || 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/94016a44-ad56-487d-b1c6-27065e036426.png',
			// content:'分享内容',
			// desc:'福分赚不停！',
		}
	})
	
	/**
	 * 页面跳转
	 */
	const toUrl = (url) => {
		uni.navigateTo({
			url
		})
	}
</script>

<style lang="less" scoped>
	.container{
		overflow: hidden;	// 解决子元素margin影响父元素
		width: 100%;
		min-height: 100vh;
		box-sizing: border-box;
		position: relative;
		padding-bottom: 105rpx;
		background-image: url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/ce42c2bd-4e63-4665-bd46-23e9d3f4d741.png'), url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/b903f1d7-3e8e-4a01-88be-e6d0968dcbab.png');
		background-repeat: no-repeat;
		background-position: center 132rpx, left top;
		background-size: 702rpx 269rpx, 100% 876rpx;
		background-color: #F04D44;
		
		.rule{
			padding: 40rpx 35rpx;
			box-sizing: border-box;
			margin: 40rpx auto 0;
			width: 686rpx;
			background: #FFF6E5;
			box-shadow: 0rpx 8rpx 16rpx 0rpx #DE1C00;
			border-radius: 20rpx;
			.title{
				font-weight: bold;
				font-size: 32rpx;
				text-align: center;
				margin-bottom: 24rpx;
				color: #FF443F;
			}
		}
		
		.warning{
			margin-top: 24rpx;
			display: block;
			color: #333;
			font-size: 28rpx;
		}
		
		button{
			border: none;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 auto;
			padding: initial;
			line-height: initial;
			&:nth-child(1){
				margin-top:623rpx;
				width:640rpx;
				height:118rpx;
				border-radius:59rpx;
				color:#fff;
				background:url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/e4b6627f-22af-438a-b36f-4e6d48680f47.png') no-repeat left top / 100% 100%;
			}
			&:nth-child(2){
				margin-top:14rpx;
				width:622rpx;
				height:100rpx;
				border-radius:50rpx;
				color:#000;
				background:#fff;
			}
		}
	}
</style>